<template>
  <view class="trends">
    <top-status></top-status>
    <!-- #ifdef MP-WEIXIN -->
    <view class="topBox">
      <view class="puadd" @click="release">
        <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717153248323108.png"
          mode="widthFix"></image>
        <view class="putitle">发布</view>
      </view>
      <view class="hyq">挥友圈</view>
    </view>
     <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view class="apptopbox">
        <view class="topBox2">
        <view class="puadd" @click="release">
          <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717153248323108.png"
            mode="widthFix"></image>
          <view class="putitle">发布</view>
        </view>
        <view class="hyq">挥友圈</view>
      </view>
    </view>
    <!-- #endif -->
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <block v-else>
      <!-- #ifdef MP-WEIXIN -->
      <x-scroll @onRefresh="onRefresh" :isNav="false" :refresh="true" @scrolltolower="scrolltolower" :offset="0"
        style="height: 100vh">
        <!-- #endif -->
        <view class="week_share" v-if="action_list.length > 0"
          @click="nav_to(`/pages/dynamic/subject?id=${action_list[0].ID}`)">
          <view class="week_act">
            <view class="title">{{ action_list[0].Title }}
              <view class="desc">共有{{ action_list[0].Communities.length }}人已加入挑战</view>
            </view>
            <view class="title_right">加入挑战</view>
          </view>
        </view>
        
        <block v-if="Array.isArray(list) && list.length > 0">
          <view class="list" id="listArea">
            <view class="bannerBox">
              <swiper class="swiper" :autoplay="true" circular :style="{ height: swiperHeight + 'rpx' }">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                  <view class="bannerImageBox" @click="nav_to(item.GoUrl)">
                    <image class="adverimg" :src="item.Banner" mode="widthFix"></image>
                  </view>
                </swiper-item>
              </swiper>
            </view>

            <view class="item" v-for="(item, index) in list" :key="index">
              <view class="item_hd wap" :class="{'nonePd':!item.Content}" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
                <view class="left">
                  <view class="cover">
                    <image :src="item.HeadImgUrl" mode="aspectFill" />
                  </view>

                  <view class="item_name">
                    <view class="userName">
                      {{ $util.entitiesToUtf16(item.Name) }}
                      <image v-if="item.UserType != '普通用户'" mode="widthFix" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                      <view class="f3 c3 usertime">{{ getTime(item.CreateTime) }}</view>
                      </view>
                    <view class="daybox">
                      <text class="Birthday">{{item.Birthday ? getYearStr(item.Birthday) + "后": "00后"}}</text>
                      <!-- <text class="borderLine">|</text>
                      <text class="city" v-if="item.City">{{
                        item.City ? item.City : ""
                      }}</text> -->
                    </view>
                  </view>
                </view>
              </view>
              <view class="item_bd wap">
                <!-- <view class="f2 c2" v-if="item.PagePath!=''" @click="nav_to(`${item.PagePath}`)">
									<view class="">
										{{item.Content}}
									</view>
								</view> -->
                <view class="f2 c4 diyC" v-if="item.Content">{{
                  $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;")
                }}</view>

                <view class="mt20" @click.stop="''" v-if="item.IsVideo === 0">
                  <view class="one" @click.stop="lookimg(item.Images,0,item.UserID)" v-if="JSON.parse(item.Images).length == 1">
                    <image class="simg oneImg" :src="JSON.parse(item.Images)[0]" mode="widthFix"
                      @click.stop="lookimg(item.Images, 0,item.UserID)" />
                  </view>
                  <view class="two" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 2">
                    <view class="two-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                      <image class="simg" :src="JSON.parse(item.Images)[0]
                        " mode="aspectFill" />
                    </view>
                    <view class="two-two">
                      <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 1,item.UserID)" />
                    </view>
                  </view>
                  <view class="three" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 3">
                    <view class="three-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                      <image class="simg" :src="JSON.parse(item.Images)[0]" mode="aspectFill" />
                    </view>
                    <view class="three-two">
                      <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 1,item.UserID)" />
                      <image class="simg" :src="JSON.parse(item.Images)[2]" mode="aspectFill"
                        @click.stop="lookimg(item.Images, 2,item.UserID)" />
                    </view>
                  </view>
                  <view class="four" @click.stop="lookimg(item.Images,0,item.UserID)" v-else-if="JSON.parse(item.Images).length == 4">
                    <view class="four-one">
                      <view class="four-one-one" @click.stop="lookimg(item.Images, 0,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[0]" mode="aspectFill" />
                      </view>
                      <view class="four-one-two" @click.stop="lookimg(item.Images, 1,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[1]" mode="aspectFill" />
                      </view>
                    </view>
                    <view class="four-two">
                      <view class="four-two-one" @click.stop="lookimg(item.Images, 2,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[2]" mode="aspectFill" />
                      </view>
                      <view class="four-two-two" @click.stop="lookimg(item.Images, 3,item.UserID)">
                        <image class="simg" :src="JSON.parse(item.Images)[3]" mode="aspectFill" />
                      </view>
                    </view>
                  </view>
                  <view class="five" v-else>
                    <view class="five-one" v-for="(imgs, index) in JSON.parse(item.Images)" :key="index">
                      <image @click.stop="lookimg(item.Images, index,item.UserID)" :src="imgs" mode="aspectFill" />
                    </view>
                  </view>
                </view>
                <view class="video_box" v-else @click.stop="">
                  <!-- #ifdef MP-WEIXIN -->
                  <video :id="'video'+index" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
                    '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
                    " @play="videoPlay(index)">
                    </video>
                  <!-- #endif -->
                  <!-- #ifdef APP-PLUS -->
                    <view class="v_imgbox" @click="gotovideo(item)">
                      <image class="videoimg" style="max-width:100%;" :src="JSON.parse(item.Images)[0]+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
                    </image>
                    <image class="playimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17259497034651108.png"></image>
                    </view>
                  <!-- #endif -->
                </view>
              </view>

              <view class="all-list">
                <view class="upvote">
                  <view class="zan-time">
                    {{ item.City ? item.City : "" }}
                  </view>
                  <view class="zan-review">
                    <view class="zan" @click="zan(item.ID)">
                      <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                      <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                      <text>{{
                        item.CommunityZAN.length > 0
                          ? item.CommunityZAN.length
                          : ""
                      }}</text>
                    </view>
                    <!-- <view class="zan" @click="open_gift(item)">
											<uni-icons type="gift" size="24" color="#9b9b9b" v-if="item.IsSendGift==0"></uni-icons>
											<uni-icons type="gift-filled" size="24" color="#ef4034" v-else></uni-icons>
											<text>{{item.TotalGiftNum>0?item.TotalGiftNum:''}}</text>
										</view> -->
                    <view class="zan" @click="tocommit(item.ID, 0)">
                      <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                      <text>{{
                        item.CommunityComments.length > 0
                          ? item.CommunityComments.length
                          : ""
                      }}</text>
                    </view>
                    <view class="zan">
                    <!-- #ifdef MP-WEIXIN -->
                    <button hover-class="none" open-type="share" :data-id="item.ID">
												<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
											</button>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <!-- <button hover-class="none" @click="app_share(item)">
												<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
											</button> -->
                    <!-- #endif -->
                    </view>
                  </view>
                </view>

                <view class="review-list" v-if="item.CommunityComments.length > 0">
                  <view class="list" v-for="(review, c_index) in item.CommunityComments" :key="review.ID">
                    <view class="content" @click="comment_edit(index, c_index, review.Name)" v-if="review.ReplyID > 0">
                      <!-- <view class="content" :class="{diyHeight:useDiyHeight}" @click="comment_edit(index,c_index)" v-if="review.ReplyID>0"> -->
                      <text>
                        <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.UserID)">{{
                          $util.entitiesToUtf16(review.Name) }}</text>
                        <text class="reviewC">回复</text>
                        <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.Pre_UserID)"> {{
                          $util.entitiesToUtf16(review.Pre_Name) }}:</text>
                        </text>
                      <text>{{ $util.entitiesToUtf16(review.Content) }}</text>
                    </view>
                    <!-- <view class="content" :class="{diyHeight:useDiyHeight}" @click="comment_edit(index,c_index,review.Name)" v-else> -->
                    <view class="content" @click="comment_edit(index, c_index, review.Name)" v-else>
                      <text @click.stop="nav_to('/pages/user/user_visitor?id=' + review.UserID)">{{ $util.entitiesToUtf16(review.Name) }}:</text>
                      <text>{{ $util.entitiesToUtf16(review.Content) }}</text>
                    </view>
                  </view>
                </view>
              </view>

              <view class="load" v-if="bottom_load">
                <u-loading-icon mode="circle" inactive-color="#fff" vertical></u-loading-icon>
              </view>
            </view>
            <view style="height: 200rpx"></view>
          </view>
        </block>
        <block v-else>
          <u-empty mode="list" width="64" height="64"
            icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/community/20230510114106.png" :show="true" iconSize="32"
            text="暂无动态"></u-empty>
        </block>
        <!-- #ifdef MP-WEIXIN -->
      </x-scroll>
      <!-- #endif -->
    </block>

    <!-- <view class="add_btn" v-if="IsCommunity" @click="release">
			<image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152226989686.png">
			</image>
		</view> -->
    <!-- 赠送礼物弹出层 -->
    <uni-popup ref="gift" type="center">
      <view class="x-popup">
        <view class="popup-title">赠送对方礼物
          <view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
        </view>
        <scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
          <view class="x-list">
            <view v-for="(l, i) in gift" :key="i" @click="gift_active = i" class="list-cell"
              :class="{ 'list-active': i == gift_active }">
              <image class="list-icon" :src="l.Icon ? l.Icon : '/static/img/icon_bbt.png'" mode=""></image>
              <view v-if="i != gift_active" class="list-name">
                {{ l.Name }}
              </view>
              <view class="list-price"> ￥{{ l.Price }} </view>
              <!-- <view v-if="i==gift_active" @click="giftEvent" class="list-btn"> 赠送 </view> -->

              <view v-if="i == gift_active" class="list-btn">
                <view class="add" @click="gift_num_reduce(l)">-</view>
                <view class="count">
                  <input type="text" v-model="l.Num" />
                </view>
                <view class="add" @click="gift_num_plus(l)">+</view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="popup-btn" @click="giftEvent">赠送</view>
      </view>
    </uni-popup>

    <!-- APP 分享 转发好友、朋友圈 -->
    <!-- #ifdef APP-PLUS -->
    <uni-popup ref="share" type="bottom">
      <view class="x-share">
        <view class="item" @click="shareWX()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
          <span>转发好友</span>
        </view>
        <view class="item" @click="sharePYQ()">
          <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
          <span>分享朋友圈</span>
        </view>
      </view>
    </uni-popup>
    <!-- #endif -->

    <inputBox :commit="commit" @submit="submit" @onBlur="onBlur"></inputBox>
  </view>
</template>

<script>
import inputBox from "./components/input-box.vue";
import Layoutimg from "@/components/Layoutimg/Layoutimg.vue";
import myVideo from "@/components/myVideo/myVideo.vue";
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
  components: {
    inputBox,
    Layoutimg,
    topStatus,
    myVideo,
  },
  data() {
    return {
      idBe64:'',
      commit: false,
      user: {},
      load: false,
      bottom_load: false,
      oldList: [],
      list: [],
      shareTitle: "挥友", //转发的标题
      sharePath: "", //转发的页面
      shareImg: "",

      PageIndex: 1,
      PageSize: 15,
      CompanyID: 6002,
      isMore: true,
      cz_price: 100,
      zan_id: 0,
      IsCommunity: false,
      review_id: 0,
      comment_id: 0,
      scrollTop: 0, // 数据绑定，用于保存滚动位置
      screenHeight: 0, //屏幕高度
      isLoading: true, //防止频繁触发
      bottomDistinct: 200, //距离底部多少像素时触发

      gift: [], //礼物数组
      gift_active: -1, //当前选中礼物
      sel_community: "",

      action_list: "",
      repName: "",
      // useDiyHeight:true,
      bannerList: [
        //轮播图列表
        {
          Banner:
            "https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171523386222866.png",
        },
      ],
      swiperHeight: 110, //轮播图高度
      ossWatermark:""
    };
  },
  async onLoad(args) {
    this.getLogo()
    let res = await this.$api.post("Company/GetCompanyInfo", {
      ID: 6002,
    });

    if (res.data) {
      if (res.data.IsCommunity == 1) this.IsCommunity = true;
      else this.IsCommunity = false;
    }

    // 获取礼物列表
    this.GetGift();

    this.getAction();

    this.GetBanner();
    await this.$api.post("/Common/Add_ViewPath", {
      Path: "community",
      Platform: uni.getStorageSync("platform"),
    });
    uni.$on("giftEvent", (res) => {
      this.$pv.msg("礼物赠送成功");
      this.list.forEach((item, index) => {
        if (item.ID == this.sel_community.ID) {
          item.IsSendGift = 1;
          item.TotalGiftNum = item.TotalGiftNum + res.Num;
          this.list.splice(index, 1, item);
        }
      });

      //组装消息实体(暂时隐藏im)
      //const n_msg = {
      //	Price: res.gift_price,
      //	Name: res.Name,
      //	OutMessageId: res.MessageId,
      //	Done: 0,
      //	Icon: res.Icon
      //}
      // 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
      //this.$im.sendMessage(200, JSON.stringify(n_msg), this.sel_community.UserID + '09', 12).then(res => {
      //	console.log(JSON.stringify(n_msg));
      //});
    });
    

    this.user = uni.getStorageSync("user");

    this.init();

    this.screenHeight = uni.getSystemInfoSync().screenHeight;

    this.getLatestMessageCount();
		
		uni.$on('update',()=>{
			this.init();
		})

  },
	onShow() {
		if(this.$store.state.Refresh){
			this.init();
		}
	},
  // #ifdef APP-PLUS
		onLaunch() {
			console.log('appPlus')
			plus.screen.lockOrientation("portrait-primary")
		},
		// #endif
	onUnload() {
		uni.$off('update')
	},
  methods: {
    gotovideo(item){
      let src = JSON.parse(item.Images)[0]
      this.nav_to('/pages/album/myVideo?src='+src)
    },
    //视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.list.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
    async GetBase64ForID(id){
      let res = await this.$api.post('Common/ConvertBase64',{
        Value_Data:id
      })
      if(res.code == 0){
        this.idBe64 = res.data
      }
    },


    getLogo() {
      this.ossWatermark=this.$ossWatermark
    },
    //轮播图
    async GetBanner() {
      let res = await this.$api.post("/Banner/GetBanner", {
        PageKey: "community-top",
      });
      if (res.code == 0 && res.data.length > 0) {
        this.bannerList = res.data;
      }
    },
    //发布
    release() {
      let _this = this;
      if (uni.getStorageSync("user").IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: function (rs) {
            if (rs.confirm) {
              _this.nav_to("/pages/start/start2");
              return;
            } else if (rs.cancel) {
              return;
            }
          },
        });
      } else {
        this.nav_to("/pages/dynamic/dynamic_add");
      }
    },
    app_share(item) {
      this.sel_community = item;
      this.$refs.share.open();
    },
    //礼数数减
    gift_num_reduce(l) {
      if (l.Num >= 1) {
        l.Num--;
      }
    },
    //礼物数加
    gift_num_plus(l) {
      if (l.Num >= 0) {
        l.Num++;
      }
    },
    async getLatestMessageCount() {
      // 发送请求获取最新消息数量
      const response = await this.$api.post("/Community/TotalNum");

      // 解析响应数据，获取消息数量
      const latestCount = response.data;

      uni.setStorageSync("messageCount", latestCount);
    },

    // 评论
    tocommit(ID, C_ID) {
      let _this = this;
      if (uni.getStorageSync("user").IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: function (rs) {
            if (rs.confirm) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      // console.log('没有被return');
      // console.log(id);
      this.commit = !this.commit;
      this.review_id = ID;
      this.comment_id = C_ID;

      //console.log('评论ID', this.review_id);
    },
    async delReview(index, c_index) {
      const item = this.list[index].CommunityComments[c_index];
      //console.log(item,"评论删除");
      let res = await this.$api.post("/Community/DeletePage", {
        ID: item.ID,
      });
      this.$pv.msg("删除成功");

      this.list[index].CommunityComments.splice(c_index, 1);
    },
    onBlur(emit) {
      setTimeout(()=>{
        this.commit = emit;
      },500)
      
    },
    async submit(val) {
      // console.log('22222222');
      // console.log(val,'val');
      if (val != "") {
        // 转换后端可编译的emoji表情的编码格式
        let utf16 = this.$util.utf16ToEntities(val).slice(0,200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        //console.log(JSON.parse(res.data));
        if (res.code == 0) {
         // console.log("评论测试",res);
          this.list.forEach(async (item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID:res.data
              });
              this.list.splice(index, 1, item);
            }
          });

          this.commit = !this.commit;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    closeDh() {
      this.$refs.duihuan.close();
    },
    openDh() {
      this.$refs.duihuan.open();
    },
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      //console.log(Name);
      _this.repName = Name;
      // _this.useDiyHeight = !_this.useDiyHeight
      const user = uni.getStorageSync("user");

      const item = this.list[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) {},
        });
      } else {
        //直接回复
        //console.log("===item.CommunityID, item.ID", item.CommunityID, item.ID);
        this.tocommit(item.CommunityID, item.ID);
      }
    },

    async init() {
      this.PageIndex = 1;
      this.oldList = [];

      await this.getList();

      this.load = true;
    },
    async getList() {
      let res = await this.$api.post("Community/PageList", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        CompanyID: this.CompanyID,
      });

      this.oldList = this.oldList.concat(res.data);
      this.list = JSON.parse(JSON.stringify(this.oldList));
      this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
      //console.log(res.data.length >= this.PageSize);

      return true;
    },
    open_detail(id) {
      this.nav_to("/pages/dynamic/detail?id=" + id);
    },
    // 获取礼物列表
    async GetGift() {
      let res = await this.$api.post("Friend/GetGift");
      this.gift = res.data || [];
    },
    async getAction() {
      let res = await this.$api.post("Action/Running", {
        ActType: "每周挑战",
      });

      this.action_list = res.data || [];
    },
    open_gift(item) {
      let _this = this;
      if (uni.getStorageSync("user").IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: function (rs) {
            if (rs.confirm) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.sel_community = item;
      // #ifdef APP
      uni.navigateTo({
        url: "/pages/dynamic/community_gift?item=" + JSON.stringify(item),
      });
      // #endif
      // #ifndef APP
      this.$refs["gift"].open();
      // #endif
    },
    // 赠送礼物的相关逻辑
    async giftEvent() {
      // 当前选中礼物
      const l = this.gift[this.gift_active];

      const gift_s_price = l.Price;
      const gift_price = l.Price * l.Num;

      const MessageId = Math.random().toString().substr(2, 10);

      let res_gift = await this.$api.post("Friend/SendGift", {
        Price: gift_price,
        GiftID: l.ID,
        GiftName: l.Name,
        GiftQty: l.Num,
        ToUserID: this.sel_community.UserID,
        EventID: this.sel_community.ID,
        SendType: "球友圈赠送",
        MessageId: MessageId,
      });

      // 支付请求
      let pres = await this.$api.post("Payment/PayV2", {
        total_fee: gift_price,
        EventType: "赠送礼物",
        EventID: JSON.stringify(res_gift.data),
        body: l.Name,
        // #ifdef MP-WEIXIN
        PayChannel: "weixin",
        // #endif
        // #ifdef APP
        PayChannel: "app",
        // #endif
      });
      // 已余额支付成功
      if (pres.data == 0) {
        // 提示赠送成功
        this.$pv.msg("礼物赠送成功");
        // 关闭礼物弹出层
        this.$refs["gift"].close();

        this.list.forEach((item, index) => {
          if (item.ID == this.sel_community.ID) {
            item.IsSendGift = 1;
            item.TotalGiftNum = item.TotalGiftNum + l.Num;
            this.list.splice(index, 1, item);
          }
        });

        //组装消息实体 (暂时隐藏im)
        //const n_msg = {
        //	Price: gift_price,
        //	Name: l.Name,
        //	OutMessageId: MessageId,
        //	Done: 0,
        //	Icon: l.Icon
        //}
        // 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
        //this.$im.sendMessage(200, JSON.stringify(n_msg), this.sel_community.UserID + '', 12).then(res => {
        //	console.log(JSON.stringify(n_msg));
        //});

        return;
      }

      // 支付成功返回的内容
      let payObj = JSON.parse(pres.data);
      let _this = this;
      // 调用uni支付API
      uni.requestPayment({
        // 服务提供商
        provider: "wxpay",
        // #ifdef APP
        orderInfo: payObj,
        // #endif
        // #ifdef MP-WEIXIN
        timeStamp: payObj.timeStamp,
        nonceStr: payObj.nonceStr,
        package: payObj.package,
        signType: payObj.signType,
        paySign: payObj.paySign,
        // #endif
        success(res) {
          // 关闭礼物弹出层
          _this.$refs["gift"].close();

          _this.$pv.msg("礼物赠送成功");

          _this.list.forEach((item, index) => {
            if (item.ID == _this.sel_community.ID) {
              item.IsSendGift = 1;
              item.TotalGiftNum = item.TotalGiftNum + l.Num;
              // item.Gifts.push({
              // 	UserID: uni.getStorageSync('user').UserID
              // })
              _this.list.splice(index, 1, item);
            }
          });

          //组装消息实体(暂时隐藏im)
          //const n_msg = {
          //	Price: gift_price,
          //	Name: l.Name,
          //	OutMessageId: MessageId,
          //	Done: 0,
          //	Icon: l.Icon
          //}
          // 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
          //_this.$im.sendMessage(200, JSON.stringify(n_msg), _this.sel_community.UserID + '', 12)
          //	.then(res => {
          //		console.log(JSON.stringify(n_msg));
          //	});
        },
        fail(err) {
          _this.$pv.msg("支付失败");
        },
      });
    },
    async delete(id) {
      let _this = this;
      let index = this.list.findIndex((item) => item.ID === id);

      uni.showModal({
        title: "温馨提示",
        content: "您确定要删除这条动态吗?",
        confirmText: "删除",
        success: async function (res) {
          if (res.confirm) {
            let res = await _this.$api.post("/Community/Delete", {
              ID: id,
            });
            _this.list.splice(index, 1);
          } else if (res.cancel) {
          }
        },
      });
    },
    // 赞
    async zan(zid) {
      let _this = this;
      if (uni.getStorageSync("user").IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: function (rs) {
            if (rs.confirm) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }

      this.zan_id = zid;

      //============暂时去掉点赞收费内容  update  2023-10-11
      //先判断用户余额是否足够
      //不够则弹出充值页面
      // let ba = await this.$api.post('/SaleChannel/SaleChannelDetail', {
      // 	CompanyID: 6002
      // });
      // if (ba.data) {
      // 	if (ba.data.Balance < 1) {
      // 		this.$refs.duihuan.open();
      // 		return;
      // 	}
      // }

      let res = await this.$api.post("Community/ZAN", {
        ID: zid,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.list.forEach((item, index) => {
          if (item.ID == zid) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: uni.getStorageSync("user").UserID,
              HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
            });
            this.list.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },

    //下拉刷新
    async onRefresh() {
      this.PageIndex = 1;
      this.oldList = [];
      await this.getList();
    },

    //滚动到底部触发
    async scrolltolower() {
      if (this.isMore) {
        this.bottom_load = true;

        this.PageIndex++;
        this.getList();

        this.bottom_load = false;
      }
    },
    lookimg(url, index,id) {
      this.GetBase64ForID(id)
      let arr = JSON.parse(url);
      arr = arr.map(item=>item)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
    onPageScroll(e) {
      const {
        scrollTop, //滚动条距离页面顶部的像素
      } = e;
      //获取SelectorQuery 对象实例
      const query = uni.createSelectorQuery().in(this);
      //为listArea节点绑定查询请求
      query
        .select("#listArea")
        .boundingClientRect((data) => {
          let {
            height, //listArea节点的高度
          } = data;
          //如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离)
          if (
            this.bottomDistinct >= height - this.screenHeight - scrollTop &&
            this.isLoading
          ) {
            //模拟异步加载数据
            // this.PageIndex++
            this.isLoading = false;
            if (this.isMore) {
              this.PageIndex++;
              this.getList();
            }
            setTimeout(() => {
              this.isLoading = true; // 一定时间后恢复标识变量为 true，允许再次触发
            }, 1000); //
          }
        })
        .exec();
    },
    sharePYQ() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.sel_community.ID;
      let _title = this.sel_community.Content
        ? this.sel_community.Content
        : "发现精彩的挥友动态，赶快来围观吧";

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
      let shareUrl = BaseUrl + paseUrl;

      uni.share({
        provider: "weixin",
        scene: "WXSceneTimeline",
        type: 0,
        href: shareUrl,
        title: "【挥友朋友圈】" + _title,
        imageUrl: JSON.parse(this.sel_community.Images)[0],
        success: (res) => {
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });
    },
    shareWX() {
      const user = uni.getStorageSync("user");

      const pid = user.UserID;
      let id = this.sel_community.ID;
      let _title = this.sel_community.Content
        ? this.sel_community.Content
        : "发现精彩的挥友动态，赶快来围观吧";

      const BaseUrl = "http://h5.golf.xiaojusmart.com/#/";
      const paseUrl = `pages/H5/cm_detail?id=${id}&pid=${pid}`;
      let sharUrl = BaseUrl + paseUrl;
      let _this = this;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 5,
        imageUrl: JSON.parse(this.sel_community.Images)[0],
        title: "【挥友朋友圈】" + _title,
        miniProgram: {
          id: "gh_ff1a33213d99",
          path: "pages/dynamic/detail?id=" + id + "&pid=" + pid,
          type: 0,
          webUrl: sharUrl,
        },
        success: (res) => {
          this.$refs.share.close();
        },
        fail(err) {
          console.log("fail:" + JSON.stringify(err));
        },
      });

      // this.is_app_share_show = false;
    },
  },

  onPullDownRefresh() {
    this.init();

    uni.stopPullDownRefresh();
  },
  onShareAppMessage(e) {
    //发送给朋友
    // let trendsIndex = e.target.dataset.trendsIndex;
    if (e.target) {
      let trendsId = e.target.dataset.id;
      if (trendsId > 0) {
        let o = this.list.find((item) => item.ID == trendsId);
        let pid = uni.getStorageSync("user").UserID;

        //console.log("pages/dynamic/detail?pid=" + pid + "&id=" + trendsId);

        this.shareTitle = "挥友精彩瞬间，您不容错过";
        this.sharePath = "pages/dynamic/detail?pid=" + pid + "&id=" + trendsId;
        this.shareImg =
          o.IsVideo == 1
            ? JSON.parse(o.Images)[0] +
              "?x-oss-process=video/snapshot,t_1,m_fast,ar_auto"
            : JSON.parse(o.Images)[0];
        return {
          title: this.shareTitle,
          path: this.sharePath,
          imageUrl: this.shareImg,
        };
      }
    } else {
      let pid = uni.getStorageSync("user").UserID;

      this.shareTitle = "挥友精彩瞬间，您不容错过";
      this.sharePath = `pages/tab/community?pid=` + pid;

      return {
        title: this.shareTitle,
        path: this.sharePath,
      };
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.trends {
  height: 100vh;

  .week_share {
    display: flex;
    background-color: #f4f4f4;
    border: #848484 1rpx solid;
    width: 95%;
    margin: 10rpx auto;
    padding: 10rpx;

    image {
      width: 100%;
      height: 100rpx;
    }

    .week_act {
      color: #ffff00;
      padding: 10rpx;
      width: 70%;
      flex-direction: row;
      display: flex;

      .title {
        color: #2f2f00;
        font-size: 36rpx;
        font-weight: bold;
      }

      .desc {
        color: #81807f;
        font-size: 28rpx;
      }
    }

    .title_right {
      font-size: 32rpx;
      justify-content: center;
      justify-items: center;
      position: absolute;
      right: 40rpx;
      background-color: #ff9800;
      border-radius: 10rpx;
      padding: 12rpx;
      color: #fff;
    }

    .act {
      line-height: 40rpx;
      color: #55aaff;
    }
  }

  .item {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx;
    padding: 20rpx 0;

    .item_hd {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;

      .left {
        height: 100rpx;
        flex: 1;
        display: flex;
        align-items: center;
      }

      .cover {
        width: 80rpx;
        min-width: 80rpx;
        height: 80rpx;
        border-radius: 50rpx;
        border: 1px solid #7b7b7b;
        overflow: hidden;
        margin-right: 16rpx;

        image {
          height: 100%;
          width: 100%;
          display: block;
        }
      }

      .item_name {
        flex: 1;
        .userName{
          color: #333;
          font-size: 32rpx;
          font-weight: 600;
          display: flex;
          align-items: center;
          >image{
            width: 76rpx;
            margin-left: 10rpx;
          }
          .usertime{
            font-weight: 500 !important;
            margin-left: auto;
          }
        }
        
        .daybox {
          font-weight: 400;
          font-size: 24rpx;
          margin-top: 6rpx;
          .Birthday {
            font-size: 24rpx;
            padding: 0 15rpx 0 0;
            color: #999999;
          }
          .borderLine{
            font-size: 24rpx;
            color: #999999;
          }
          .city {
            margin-left: 15rpx;
            color: #999999;
          }
        }
      }
    }

    .item_ft {
      display: flex;
      justify-content: space-between;
      height: 60rpx;
      align-items: right;

      .ft_btn {
        display: flex;
        align-items: center;
      }

      .icon_box {
        height: 48rpx;
        width: 48rpx;
        border-radius: 48rpx;
        background: rgba(255, 255, 255, 0.9);
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 32rpx;
          width: 32rpx;
        }
      }
    }

    .item_bd {
      .diyC {
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        white-space: pre-line;
      }

      .simg {
        display: block;
        //smax-height: 750rpx;
      }


      .order_div {
        width: 100%;
        margin-top: 10rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }
}

// .add_btn {
// 	position: fixed;
// 	right: 32rpx;
// 	bottom: 170rpx;
// 	width: 96rpx;
// 	height: 96rpx;
// 	z-index: 999;
// 	// text-align: center;
// 	align-items: center;
// 	line-height: 96rpx;
// 	border-radius: 100rpx;

// 	>image {
// 		width: 96rpx;
// 		height: 96rpx;
// 	}
// }
.apptopbox{
  width: 100%;
  height: 54rpx;
  // position: relative;
  background-color: #fff;
  margin-bottom: 25rpx;
}
.topBox2 {
  width: 100%;
  height: 150rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: fixed;
  top: -15rpx;
  left: 0;
  background-color: #fff;
  z-index: 9999;
  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .puadd {
    width: 150rpx;
    height: 58rpx;
    border-radius: 32rpx;
    background-color: #f2f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 20rpx;

    .putitle {
      color: #706eee;
      font-weight: bold;
      font-size: 26rpx;
    }

    .releaseimg {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
.topBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15rpx auto;
  position: relative;
  z-index: 9999;
  .hyq {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .puadd {
    width: 150rpx;
    height: 58rpx;
    border-radius: 32rpx;
    background-color: #f2f2ff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 20rpx;

    .putitle {
      color: #706eee;
      font-weight: bold;
      font-size: 26rpx;
    }

    .releaseimg {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.order_btn {
  width: 100%;
  height: 70rpx;
  text-align: center;
  align-items: center;
  background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
  box-shadow: 0px 4rpx 6rpx 0px rgba(106, 84, 53, 0.4);
  color: #4c310c;
  line-height: 70rpx;
  border-radius: 10rpx;
}
.nonePd {
  padding-bottom: 0 !important;
}
.mt20 {
  margin-top: 20rpx;

  .one {
    display: flex;
    width: 100%;
    max-height: 800rpx;
    overflow: hidden;
    //height: 400rpx;

    // image {
    //   width: 70%;
    // }
  }

  .two {
    display: flex;

    .two-one {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .two-two {
      width: 200rpx;
      height: 200rpx;
      margin-left: 6rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .three {
    display: flex;
    
    .three-one {
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .three-two {
      display: flex;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-left: 6rpx;
      }
    }
  }

  .four {
    display: flex;
    flex-direction: column;

    .four-one {
      display: flex;

      .four-one-one {
        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .four-one-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }

    .four-two {
      display: flex;
      margin-top: 6rpx;
      .four-two-one {
        image {
          width: 200rpx;
        height: 200rpx;
        }
      }
      .four-two-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
        }
      }
    }
  }

  .five {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .five-one {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 8rpx;
      margin-right: 4rpx;
      margin-left: 4rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.video_box {
  height: 500rpx;
  position: relative;
  z-index: 1;
margin-top: 20rpx;
  video {
    width: 50%;
    height: 100%;
    z-index: 1;
    // background-color: red;
    // margin-top: 10rpx;
    
  }
  .v_imgbox{
    width: 70%;
    position: relative;
  }
  .videoimg{
    display: block;
  }
  .playimg{
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
}

.all-list {
  width: 100%;
  // box-sizing: border-box;

  // padding: 0 32rpx;

  .location {
    font-size: 30rpx;
    color: #dcc188;
  }

  .upvote {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin: 5rpx 32rpx;
    margin-top: 20rpx;
    // padding-bottom: 15rpx;

    .zan-time {
      font-size: 26rpx;
      color: #999999;
    }

    .zan-review {
      display: flex;
      align-items: right;
      margin: 10rpx 0;
      height: 40rpx;
      margin-left: auto;

      image {
        padding-top: 26rpx;
        width: 48rpx;
        height: 48rpx;
      }

      .zan {
        display: flex;
        align-items: center;

        text {
          padding-left: 5rpx;
          font-size: 26rpx;
        }
      }

      .zan:last-child {
        margin-left: 4rpx;
      }

      button {
        display: flex;
        //height:50rpx !important;
        background-color: unset;

        &::after {
          border: 0;
        }
      }
    }

    .gift-review {
      display: flex;
      align-items: right;

      .zan {
        margin-right: 40rpx;
      }
    }
  }

  .tishi {
    box-sizing: border-box;
    position: relative;
    height: 60rpx;
    border-radius: 6rpx;
    background-color: #ffffff;
    display: flex;
    margin-top: 30rpx;
    padding-left: 6rpx;

    text {
      line-height: 60rpx;
      font-size: 28rpx;
      color: #dcc188;
      margin-left: 12rpx;
      letter-spacing: 2px;
    }

    .sanjiao {
      position: absolute;
      top: -15rpx;
      left: 30rpx;
      width: 0;
      height: 0;
      border-left: 15rpx solid transparent;
      border-right: 15rpx solid transparent;
      border-bottom: 20rpx solid #fff;
    }
  }

  .review-list {
    // display: flex;
    // flex-direction: column;
    /* margin: 20rpx 20rpx 20rpx; */
    // background-color: #F6F6F6;
    // padding: 10rpx 20rpx;
    // margin: 0 20rpx;
    width: 100%;

    .list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      line-height: 45rpx;

      .content {
        margin-left: 32rpx;
        margin-right: 32rpx;
        font-weight: 700;
        font-size: 28rpx;
        word-break: break-all;

        text {
          box-sizing: border-box;
          font-weight: 500;
          font-size: 28rpx;
          color: #5f698b;
          padding-right: 10rpx;
        }

        .reviewC {
          font-weight: 500;
          font-size: 28rpx;
          color: #1d1d1d;
          // margin: 0 10rpx;
        }

        > text:last-child {
          font-weight: 500;
          font-size: 28rpx;
          color: #1d1d1d;
          word-break: break-all;
          margin-left: 10rpx;
        }
      }

      .del {
        font-size: 12px;
        color: #576b95;
      }
    }
  }
}

.x-share {
  background-color: #ffffff;
  width: 750rpx;
  border-radius: 20rpx;
  padding: 40rpx 20rpx 80rpx;
  display: flex;
  box-sizing: border-box;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;

    image {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 10rpx;
    }

    span {
      color: #2e2e2e;
    }
  }
}

.x-popup {
  background-color: #ffffff;
  width: 650rpx;
  border-radius: 20rpx;
  padding-bottom: 20rpx;

  .popup-title {
    padding: 20rpx 0 10rpx;
    text-align: center;
    font-size: 32rpx;
    position: relative;
    color: #333;

    .xiaoju-popup-close {
      font-size: 24rpx;
      position: absolute;
      right: 50rpx;
      top: 10rpx;
      color: #333;
    }
  }

  .popup-wrap {
    max-height: 800rpx;
    min-height: 300rpx;
    padding-top: 10rpx;
    padding-bottom: 30rpx;

    .popup-cell {
      padding: 8rpx 40rpx;
      font-size: 30rpx;
      line-height: 44rpx;
    }
  }

  .popup-btn {
    margin: 0 auto;
    width: 200rpx;
    height: 60rpx;
    border-radius: 10rpx;
    color: #fff;
    font-size: 28rpx;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fd4c61;
  }
}

.x-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0 60rpx;

  .list-cell {
    width: 27%;
    height: 170rpx;
    border: 2rpx solid #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5rpx 0rpx 10rpx;
    border-radius: 16rpx;
    position: relative;

    &.list-active {
      border-radius: 16rpx;
      border: 2rpx solid #70737c;
    }

    .list-btn {
      width: calc(100% + 4rpx);
      height: 52rpx;
      color: #fff;
      background: #fd4c61;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      position: absolute;
      bottom: -2rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;

      .count {
        color: #fff;
        line-height: 60rpx !important;
        // margin-right: 5rpx;

        input {
          width: 40rpx;
          //border: #fff solid 1rpx;
        }
      }

      .add {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 2rpx solid #ccc; */
        box-sizing: border-box;
        font-size: 52rpx;
        width: 75rpx;
        color: #fff;
      }
    }

    .list-icon {
      width: 80rpx;
      height: 80rpx;
    }

    .list-name {
      color: #333;
      font-size: 26rpx;
      margin-top: 8rpx;
    }

    .list-price {
      color: #333;
      font-size: 22rpx;
      margin-top: 5rpx;
    }
  }
}

.bannerImageBox {
  width: 95%;
  height: 100rpx;
  margin: 0 auto;
  border-radius: 25rpx;
  overflow: hidden;
  margin: 5rpx auto;

  .adverimg {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>